<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind绑定属性基本使用</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app"> 
    <!-- 错误用法，插值语法针对的是内容动态绑定，属性不行 -->
    <!-- <img src={{ imgUrl }}></img> -->

    <!-- 正确做法 -->
    <img v-bind:src="imgUrl" alt="dog" />
    <br>
    <a v-bind:href="aHref">{{ context }}</a> 
    <br>

    <!-- 语法糖，简写格式 -->
    <img :src="imgUrl" alt="dog" />
    <br>
    <!-- href: 两个单词的缩写，超文本引用 -->
    <a :href="aHref">{{ context }}</a> 
    <br>

  </div>

  <script>
   var vm = new Vue({
    el: '#app',
    data: {
      imgUrl: '../img/dog.jpg',
      aHref: 'http://www.baidu.com',
      context: '百度一下，你就知道'
    },
    methods: {}
   });
  </script>
</body>

</html>